<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css" lang="scss">
			body {
				margin: 0;
				padding: 0;
				background: #fff;
				font-family: "微软雅黑";
				padding-bottom: 60px;
			}

			p {
				margin: 0;
				padding: 0;
			}

			/* 头部 */
			.head {
				background: url(./img/home/bg.png) center no-repeat;
				width: 100%;
				height: 820px;
				overflow: hidden;
				text-align: center;
			}

			/* .login-register {
				display: flex;
				float: right;
				margin-right: 400px;
			
				.lr-style {
					color: #fff;
					font-size: 14px;
					margin-top: 20px;
					padding: 0 6px;
				}
			} */

			.logo-title {
				font-size: 35px;
				font-weight: 600;
				color: #fff;
				margin-top: 40px;
			}

			.navmenu {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-top: 30px;
				margin-bottom: 40px;
			}

			.nav-text {
				font-size: 20px;
				color: #fff;
				font-weight: 500;
				border-left: 2px solid #aaacf7;
				margin-left: 50px;
				padding-left: 50px;
			}

			.nav-text:first-child {
				margin-left: 0;
				border-left: 0;
			}

			/* 搜索 */
			.search {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-top: 60px;
			}

			.demand {
				background: #fffdfe;
				display: flex;
				padding: 0 20px;
				height: 45px;
				line-height: 45px;
				border-right: 1px solid #eee;
			}

			.demand p {
				font-size: 14px;
				color: #767274;
			}

			.el-icon-caret-bottom {
				color: #767274;
				margin-top: 12px;
			}

			.el-input__inner {
				border-radius: 0;
				border: 0;
				width: 400px;
				height: 45px;
				line-height: 45px;
			}

			.bg-style {
				background: #fff;
				height: 45px;
				line-height: 45px;
				color: #6362ca;
				font-size: 16px;
			}

			.bg-search {
				margin-left: 4px;
				padding: 0 30px;
			}

			.and {
				margin: 0 8px;
				font-size: 16px;
				color: #fff;
			}

			.bg-release {
				padding: 0 15px;
			}

			/* 问题清单 */
			.issue {
				background: #fff;
				box-shadow: 0px 2px 5px 2px #e7e7e7;
				padding: 20px;
				display: flex;
				margin: 0 260px;
				margin-top: -400px;
			}


			.top-title {
				height: 45px;
				line-height: 45px;
				padding: 0 30px;
				background: #0017fa;
				color: #fff;
				font-size: 16px;
			}

			.title {
				background: #f7f7f7;
				height: 45px;
				line-height: 45px;
				text-align: center;
				margin-top: 6px;
				font-size: 16px;
				color: #7a7d7e;
			}

			.title:first-child {
				margin-top: 0;
			}

			.active {
				color: #5779aa;
				font-weight: 500;
				text-decoration: underline;
			}

			.rg-title {
				background: #f9f9f9;
				height: 45px;
				line-height: 45px;
				padding-left: 30px;
				font-size: 17px;
				font-weight: 500;
				color: #66625f;
			}

			.mian {
				margin-left: 20px;
			}

			.sp-font {
				font-size: 16px;
				color: #3e3e3e;
			}

			.mg-lf {
				margin-left: 40px;
			}

			.is-list {
				background: #f4f7fb;
				padding: 10px 8px;
			}

			.demand-box {
				background: #fff;
				border-radius: 2px;
				border: 1px solid #eeeeee;
				padding: 20px;
				display: flex;
				margin-left: 16px;
			}

			.demand-box:first-child {
				margin-left: 0;
			}

			.block img {
				width: 40px;
				height: 40px;
				border-radius: 100%;
			}

			.details {
				margin-left: 20px;
			}

			.head-box {
				display: flex;
				border-bottom: 1px solid #eee;
				padding-bottom: 6px;
			}

			.h-title {
				font-size: 17px;
				font-weight: 500;
				color: #191b1e;
			}

			.bg {
				border: 1px solid #eee;
				border-radius: 3px;
				width: 70px;
				height: 25px;
				line-height: 25px;
				font-size: 14px;
				text-align: center;
				margin-left: 4px;
			}

			.bg-white {
				background: #fff;
				color: #4f565b;
			}

			.bg-blue {
				background: #018af4;
				color: #fff;
			}

			.d-text {
				font-size: 16px;
				color: #8c8d91;
				margin: 14px 0;
			}

			.bg-color {
				font-size: 12px;
				color: #a7a7b1;
				background: #edf1fd;
				border-radius: 2px;
				width: fit-content;
				margin-left: 4px;
				height: 25px;
				line-height: 25px;
			}

			.bg-color:first-child {
				margin-left: 0;
			}

			.wh-small {
				width: 60px;
				text-align: center;
			}

			.wh-max {
				width: 120px;
				padding-left: 20px;
			}

			.footer {
				display: flex;
				margin-top: 15px;
			}

			.ft-span {
				margin-top: 5px;
				font-size: 14px;
				color: #a2a2a2;
				flex: 1;
				margin-left: 16px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="content">
			<div class="head">
				<!-- <div class="login-register">
					<p class="lr-style">登录</p>
					<p class="lr-style lr-line">注册</p>
				</div> -->

				<div class="logo-title">广西（柳州）汽车产教联合体服务平台</div>

				<div class="navmenu">
					<div v-for="item in nvamenu" :class="{active:index === currentIndex}" @click="currentIndex = index"
						class="nav-text">{{item.name}}</div>
				</div>

				<div class="search">
					<div class="demand">
						<p>需求</p>
						<i class="el-icon-caret-bottom"></i>
					</div>
					<div class="">
						<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2">
						</el-input>
					</div>
					<div class="bg-style bg-search">搜索</div>
					<p class="and">或</p>
					<div class="bg-style bg-release">发布需求</div>
				</div>
			</div>
			<!-- 问题清单 -->
			<div class="issue">
				<div class="left-box">
					<div class="top-title">产业关键问题清单</div>
					<div :class="{active:index === currentIndex}" v-for="item in issueTitle"
						@click="currentIndex = index" class="title">{{item.title}}</div>
				</div>
				<div class="right-box">
					<div class="rg-title">人力资源</div>
					<div class="mian">
						<div style="margin: 15px 0;">
							<span class="sp-font">就业</span>
							<span class="sp-font mg-lf">实习</span>
						</div>

						<div class="is-list">
							<div class="demand-list">
								<div style="display: flex;">
									<div class="demand-box">
										<div class="block">
											<img src="./img/miao.webp" alt="">
										</div>
										<div class="details">
											<div class="head-box">
												<div class="h-title">电商类网页开发</div>
												<div style="display: flex;">
													<p class="bg bg-white">
														<i class="el-icon-star-off"></i>
														收藏
													</p>
													<p class="bg bg-blue">揭榜</p>
												</div>
											</div>
											<p class="d-text">熟悉React，TypeScript
												5年以上使用React前端开发经验，了解AWS，阿里云等云服务前端部署，
												有团队合作经验，善于团队成员交流前端</p>
											<div style="display: flex;">
												<p class="bg-color wh-small">需求类型</p>
												<p class="bg-color wh-max">人力资源</p>
											</div>
										</div>
									</div>

									<div class="demand-box">
										<div class="block">
											<img src="./img/miao.webp" alt="">
										</div>
										<div class="details">
											<div class="head-box">
												<div class="h-title">电商类网页开发</div>
												<div style="display: flex;">
													<p class="bg bg-white">
														<i class="el-icon-star-off"></i>
														收藏
													</p>
													<p class="bg bg-blue">揭榜</p>
												</div>
											</div>
											<p class="d-text">熟悉React，TypeScript
												5年以上使用React前端开发经验，了解AWS，阿里云等云服务前端部署，
												有团队合作经验，善于团队成员交流前端</p>
											<div style="display: flex;">
												<p class="bg-color wh-small">需求类型</p>
												<p class="bg-color wh-max">人力资源</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="footer">
						<div class="ft-span">
							<span>共2页</span>
							<span>9条内容</span>
						</div>
						<div class="pag">
							<el-pagination background layout="prev, pager, next" :total="20">
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				nvamenu: [{
					name: '首页'
				}, {
					name: '政策资讯'
				}, {
					name: '产业资源'
				}, {
					name: '教育资源'
				}, {
					name: '关于我们'
				}],
				currentIndex: 0,
				issueTitle: [{
					title: '人力资源'
				}, {
					title: '科学技术'
				}, {
					title: '员工提升'
				}, {
					title: '国际化'
				}]
			}
		})
	</script>
</html>